<template>
  <div class="tab-bar">
    <router-link
      tag="div"
      class="tab-item"
      v-for="item in tabBarData"
      :key="item.id"
      :to="item.path">
      <svg-icon
        :name="item.icon"
        :color="$route.path === item.path ? '#fff' : 'rgba(255, 255, 255, 0.4)'">
      </svg-icon>
      <span>{{item.name}}</span>
    </router-link>
  </div>
</template>

<script>
export default {
  props: {
    tabBarData: {
      type: Array,
      default: () => ({})
    }
  }
}
</script>

<style lang="css" scoped>
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 96px;
  padding: 0 75px;
  box-sizing: border-box;
  background: #67B85F;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24px;
  color: rgba(255, 255, 255, .4);
  width: 100px;
}
.tab-item.router-link-exact-active {
  color: #fff;
}
</style>
